<template>
  <div class="userInfo">
    <el-form ref="user" :model="user" label-width="80px">
      <el-form-item label="" class="photo">
        <el-avatar :size="70" :src="photo"></el-avatar>
        <photo @changePhoto="changePhoto" class="change-photo"></photo>
      </el-form-item>
      <el-form-item label="ID" class="item">
        <el-input v-model="user.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="昵称" class="item">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" class="item">
        <el-input v-model="user.email" type="email"></el-input>
      </el-form-item>
      <el-form-item label="注册时间" class="item">
        <el-input v-model="user.createDate" disabled></el-input>
      </el-form-item>
      <el-form-item label="状态" class="item">
        <el-switch v-model="user.state" disabled></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import photo from "@/components/Photo";
import { mapState } from "vuex";
export default {
  name: "userinfo",
  data() {
    return {
      user: {
        photo: "/tx.jpg",
        id: null,
        name: "",
        email: "",
        createDate: "",
        state: "",
      },
    };
  },
  computed: {
    ...mapState(["userId", "email", "photo","username"]),
  },
  components: {
    photo,
  },
  created() {
    this.getUser();
  },
  methods: {
    changePhoto(photo) {
      this.user.photo = `${process.env.VUE_APP_SERVER_HOST}${photo}`;
    },
    getUser() {
      this.$https
        .get("/user/one", {
          params: { email: this.email },
        })
        .then((data) => {
          if (data.code == 200) {
            data = data.data;
            this.user = data;
            this.user.photo = `${process.env.VUE_APP_SERVER_HOST}${data.photo}`;
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    save() {
      this.$https
        .post("/user/update", this.user)
        .then((data) => {
          if (data.code == 200) {
            this.$store.commit("setuser", this.user);
            this.$message.success("保存成功");
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
  },
};
</script>

<style scoped>
.userInfo {
  padding-top: 30px;
}
.item {
  width: 500px;
}
.photo {
  display: flex;
  width: 500px;
  justify-content: center;
}
.change-photo {
  margin-left: -10px;
}
</style>
